<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Fancytree - Example: Table</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>

	<link href="../src/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css"">
	<script src="../src/jquery.fancytree.js" type="text/javascript"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="../lib/prettify.css" rel="stylesheet">
	<script src="../lib/prettify.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css">
	<script src="sample.js" type="text/javascript"></script>
	<!-- End_Exclude -->

<style type="text/css">
	div#tree{
		width: 400px;
		float: left;
	}
	ul#options li{
		list-style-type: none;
	}
</style>

<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">

var OPT_LIST = [
	["activeVisible", true, "Make sure, active nodes are visible (expanded)."],
	["aria", true, "Enable WAI-ARIA support."],
	["autoCollapse", false, "Automatically collapse all siblings, when a node is expanded."],
	["autoFocus", true, "Set focus to first child, when expanding or lazy-loading."],
	["clickFolderMode", 4, "1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)"],
	["checkbox", false, "Show checkboxes."],
	["debugLevel", 2, "0:quiet, 1:normal, 2:debug"],
	["fx", null, 'Animations, e.g. null or { height: "toggle", duration: 200 }'],
	["generateIds", false, "Generate id attributes like <span id='fancytree-id-KEY'>"],
	["idPrefix", "fancytree-id-", 'Used to generate node id´s like <span id="fancytree-id-<key>">.'],
	["keyboard", true, "Support keyboard navigation."],
	["keyPathSeparator", "/", "Used by node.getKeyPath() and tree.loadKeyPath()."],
	["minExpandLevel", 1, "1: root node is not collapsible"],
	["nolink", false, "Use <span> instead of <a> tags for all nodes"],
	["persist", false, "Persist expand-status to a cookie"],
	["selectMode", 2, "1:single, 2:multi, 3:multi-hier"]
	];

function renderCode(){
	var tree = $("#tree").fancytree("getTree"),
		hideDefaults = true,
		opts = tree.options,
		optList = OPT_LIST,
		tmplEntries = [],
		i;

	if(hideDefaults){
		optList = [];
		for(i=0; i<OPT_LIST.length; i++){
			var o = OPT_LIST[i],
				n = o[0];
			if( opts[n] !== o[1] && opts[n] !== undefined){
				optList.push(o);
			}
		}
	}
	tmplEntries.push('$("#tree").fancytree({');
	for(i=0; i<optList.length; i++){
		var o = optList[i],
			n = o[0],
			v = opts[n],
			comma = (i === (optList.length - 1)) ? "" : ",";
		if(typeof v === "string"){
			tmplEntries.push("    " + n + ': "' + v + '"' + comma + " // " + o[2]);
		}else{
			tmplEntries.push("    " + n + ": " + v + comma + " // " + o[2]);
		}
	}
	tmplEntries.push("});");
	$("#sourceCode").text(tmplEntries.join("\n"));
}

$(function(){
	$("ul#options input,ul#options select").change(function(e){
		var $this = $(this),
			n = $this.attr("name"),
			v = $this.val();
		if($this.is(":checkbox")){
			v = $this.is(":checked");
		}else if(!isNaN(parseInt(v, 10))){
			v = parseInt(v, 10);
		}
		$("#tree").fancytree("option", n, v);
		renderCode();
	});

	// Attach the fancytree widget to an existing <div id="tree"> element
	// and pass the tree options as an argument to the fancytree() function:
	$("#tree").fancytree({
		source: {
			url: "ajax-tree-plain.json"
		},
		lazyload: function(e, data) {
			data.result = {url: "ajax-sub2.json"}
		}
	});

	renderCode();
});
</script>
</head>

<body class="example">
	<h1>Fancytree option cofigurator</h1>
	<div class="description">
		This sample shows, how titles could displayed as aligned columns.
	</div>
	<p class="warning">
		TODO: this is work in progress.
	</p>
	<div>
		<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
	</div>
	<p>
		<div id="tree"> </div>
		<fieldset>
			<legend>Fancytree options</legend>
			<ul id="options">
				<li><label><input name="activeVisible" type="checkbox" checked="checked"> activeVisible</label>
				<li><label><input name="aria" type="checkbox" checked="checked"> aria </label>
				<li><label><input name="autoCollapse" type="checkbox"> autoCollapse</label>
				<li><label><input name="autoFocus" type="checkbox" checked="checked"> autoFocus</label>
				<li><label><input name="checkbox" type="checkbox"> checkbox</label>
				<li><label><input name="tabbable" type="checkbox"> tabbable</label>
				<li>clickFolderMode
					<select name="clickFolderMode" size="1">
						<option value="1">activate (1)</option>
						<option value="2">expand (2)</option>
						<option value="3">activate and expand with single click (3)</option>
						<option value="4" selected="selected">activate with single click, expand with dblclick (4)</option>
					</select>
				<li>debugLevel
					<select name="debugLevel" size="1">
						<option value="0">quiet (0)</option>
						<option value="1" selected="selected">normal (1)</option>
						<option value="2">debug (2)</option>
					</select>
				<li><label><input name="disabled" type="checkbox"> disabled</label>
				<li><label><input name="fx" type="checkbox"> fx</label>
				<li><label><input name="keyboard" type="checkbox" checked="checked"> keyboard</label>
				<li>minExpandLevel
					<select name="minExpandLevel" size="1">
						<option value="1" selected="selected">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				<li><label><input name="nolink" type="checkbox"> nolink</label>
				<li>selectMode
					<select name="selectMode" size="1">
						<option value="1">single (1)</option>
						<option value="2" selected="selected">multi (2)</option>
						<option value="3">multi-hier (3)</option>
					</select>
			</ul>
		</fieldset>
	</p>
	<pre id="sourceCode" class="prettyprint"></pre>
	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="http://fancytree.googlecode.com">jquery.fancytree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="samples.html">Example Browser</a>
<!--
		<a href="#" id="codeExample">View source code</a>
-->
	</p>
	<!-- End_Exclude -->
</body>
</html>
